<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin_fragments :: head(管理后台欢迎页)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格统计</title>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <label style="margin-right: 5px">请选择省份</label>
                    <div class="layui-inline layui-show-xs-block layui-col-space5 layui-form">
                        <select id="search_type" name="typeName">
                            <option value="" disabled selected>请选择</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="天津">天津</option>
                            <option value="重庆">重庆</option>
                            <option value="河北">河北</option>
                            <option value="山西">山西</option>
                            <option value="辽宁">辽宁</option>
                            <option value="吉林">吉林</option>
                            <option value="黑龙江">黑龙江</option>
                            <option value="江苏">江苏</option>
                            <option value="浙江">浙江</option>
                            <option value="安徽">安徽</option>
                            <option value="福建">福建</option>
                            <option value="江西">江西</option>
                            <option value="山东">山东</option>
                            <option value="河南">河南</option>
                            <option value="湖北">湖北</option>
                            <option value="湖南">湖南</option>
                            <option value="广东">广东</option>
                            <option value="广西">广西</option>
                            <option value="海南">海南</option>
                            <option value="四川">四川</option>
                            <option value="贵州">贵州</option>
                            <option value="云南">云南</option>
                            <option value="西藏">西藏</option>
                            <option value="陕西">陕西</option>
                            <option value="甘肃">甘肃</option>
                            <option value="青海">青海</option>
                            <option value="宁夏">宁夏</option>
                            <option value="新疆">新疆</option>
                            <option value="台湾">台湾</option>
                            <option value="香港">香港</option>
                            <option value="澳门">澳门</option>
                        </select>
                    </div>

                    <!--搜索按钮-->
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn " id="search_btn" lay-submit="" lay-filter="search"><i
                                class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>

            </div>
            <div class="layui-card ">
                <div class="layui-panel">
                    <div style="padding: 18px; display: flex; justify-content: center">
                        <span id="title" style="font-size: 15px">2018年~2021年平均价格统计</span>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="map">
                        <div class="chart layui-col-sm12">图表模块</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

<div th:replace="admin_fragments :: script"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

<!--    某地区2018年~2021年价格数据展示-->
<script th:inline="javascript">
    /*<![CDATA[*/
    const title = document.querySelector('#title');
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        // 初始化选择框
        form.render('select');

        $(document).on('click', '#search_btn', function (data) {
            data.preventDefault()
            var selectedProvince = $('#search_type').val();
            console.log(selectedProvince);
            loadDataAndRenderMap(selectedProvince); // 调用新创建的函数以加载数据并显示地图

        })
    });

    function loadDataAndRenderMap(province) {
        $.ajax({
            url: "/area/data/province",
            method: "GET",
            data: {province: province}, // 替换为你的省份
            success: function (data) {
                title.textContent = province + '2018年~2021年平均价格统计';
                layer.alert('查询成功！', {icon: 1}, function(index){
                    layer.close(index);
                });

                $('.ui.modal').modal('show');


                var priceDataMap = data;
                var myChart = echarts.init(document.querySelector('.map .chart'));
                var option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: Object.keys(priceDataMap),
                    },
                    xAxis: {
                        type: 'category',
                        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                        axisLabel: {
                            textStyle: {
                                color: '#87CEFA' // 亮蓝色字体
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#ADFF2F' // 亮绿色字体
                            }
                        }
                    },
                    grid: {top: '48%'},
                    series: Object.keys(priceDataMap).map(function (year) {
                        return {
                            name: year,
                            type: 'line',
                            data: priceDataMap[year].map(function (item) {
                                return item.averagePrice;
                            }),
                            smooth: true,
                            emphasis: {focus: 'series'},
                        };
                    }).concat({
                        type: 'pie',
                        id: 'pie',
                        radius: '25%',
                        center: ['50%', '25%'],
                        emphasis: {
                            focus: 'self'
                        },
                        label: {
                            formatter: '{b}: {c} ({d}%)',
                        },
                        encode: {
                            itemName: 'year',
                            value: 'averagePrice',
                            tooltip: 'averagePrice'
                        },
                        data: []
                    })
                };

                myChart.setOption(option);

                myChart.on('updateAxisPointer', function (event) {
                    var xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        var dimension = xAxisInfo.value;
                        console.log(dimension)
                        var pieData = Object.keys(priceDataMap).map(function (year) {
                            return {
                                name: year,
                                value: priceDataMap[year][dimension].averagePrice
                            };
                        });
                        console.log("pieData")
                        console.log(pieData) //有数据
                        myChart.setOption({
                            series: [{
                                id: 'pie',
                                data: pieData
                            }]
                        });
                    }
                });
            }
        })
    }

    $(document).ready(function () {
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });
        $('.ui.accordion').accordion({duration: 'click'});
        title.textContent = '广西2018年~2021年平均价格统计';
        loadDataAndRenderMap("广西"); // 页面加载时显示广西几年的地图数据
    });
    /*]]>*/
</script>
</body>
</html>